<template>
  <n-space vertical :size="16">
    <n-card title="试飞大纲智能生成系统 - 仪表盘">
      <n-grid :cols="4" :x-gap="16">
        <n-gi v-for="stat in stats" :key="stat.title">
          <n-statistic :label="stat.title" :value="stat.value">
            <template #prefix>
              <n-icon :component="stat.icon" />
            </template>
            <template #suffix v-if="stat.unit">{{ stat.unit }}</template>
          </n-statistic>
        </n-gi>
      </n-grid>
    </n-card>
    
    <n-grid :cols="2" :x-gap="16">
      <n-gi>
        <n-card title="试飞任务统计">
          <div ref="taskChartRef" style="height: 300px; width: 100%;"></div>
        </n-card>
      </n-gi>
      <n-gi>
        <n-card title="大纲生成进度">
          <div ref="progressChartRef" style="height: 300px; width: 100%;"></div>
        </n-card>
      </n-gi>
    </n-grid>

    <n-card title="快速操作">
      <n-space>
        <n-button type="primary" @click="$router.push('/agent')">
          <template #icon>
            <n-icon><CubeOutline /></n-icon>
          </template>
          生成试飞大纲
        </n-button>
        <n-button @click="$router.push('/knowledge')">
          <template #icon>
            <n-icon><LibraryOutline /></n-icon>
          </template>
          查看知识库
        </n-button>
        <n-button @click="$router.push('/report')">
          <template #icon>
            <n-icon><BarChartOutline /></n-icon>
          </template>
          生成报表
        </n-button>
      </n-space>
    </n-card>
  </n-space>
</template>

<script setup>
import { ref, onMounted, onUnmounted, nextTick } from 'vue'
import { useRouter } from 'vue-router'
import * as echarts from 'echarts'
import { 
  NCard, NSpace, NGrid, NGi, NStatistic, NIcon, NButton 
} from 'naive-ui'
import { 
  AirplaneOutline, 
  DocumentOutline, 
  TimeOutline, 
  CheckmarkCircleOutline,
  CubeOutline,
  LibraryOutline,
  BarChartOutline
} from '@vicons/ionicons5'

const router = useRouter()
const taskChartRef = ref(null)
const progressChartRef = ref(null)
let taskChart = null
let progressChart = null

const stats = [
  { title: '试飞任务', value: 28, icon: AirplaneOutline, unit: '个' },
  { title: '生成大纲', value: 156, icon: DocumentOutline, unit: '份' },
  { title: '平均用时', value: 12, icon: TimeOutline, unit: '分钟' },
  { title: '完成率', value: 95.6, icon: CheckmarkCircleOutline, unit: '%' }
]

// 初始化图表函数
const initCharts = () => {
  // 确保DOM元素存在
  if (!taskChartRef.value || !progressChartRef.value) {
    return false
  }

  // 初始化任务统计图表
  if (!taskChart) {
    taskChart = echarts.init(taskChartRef.value)
    taskChart.setOption({
      tooltip: { trigger: 'axis' },
      xAxis: { 
        type: 'category', 
        data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'] 
      },
      yAxis: { type: 'value' },
      series: [
        {
          name: '试飞任务',
          data: [12, 8, 15, 10, 18, 5, 3],
          type: 'bar',
          color: '#18a058'
        }
      ]
    })
  }

  // 初始化进度图表
  if (!progressChart) {
    progressChart = echarts.init(progressChartRef.value)
    progressChart.setOption({
      tooltip: { trigger: 'item' },
      series: [
        {
          name: '生成进度',
          type: 'pie',
          radius: ['40%', '70%'],
          data: [
            { value: 45, name: '已完成', itemStyle: { color: '#18a058' } },
            { value: 23, name: '进行中', itemStyle: { color: '#2080f0' } },
            { value: 12, name: '待开始', itemStyle: { color: '#f0a020' } }
          ]
        }
      ]
    })
  }

  return true
}

onMounted(() => {
  // 使用 nextTick 确保 DOM 已经渲染
  nextTick(() => {
    setTimeout(() => {
      if (!initCharts()) {
        // 如果第一次初始化失败，重试一次
        setTimeout(initCharts, 500)
      }
    }, 100)
  })

  const handleResize = () => {
    if (taskChart) taskChart.resize()
    if (progressChart) progressChart.resize()
  }
  window.addEventListener('resize', handleResize)
})

onUnmounted(() => {
  if (taskChart) {
    taskChart.dispose()
    taskChart = null
  }
  if (progressChart) {
    progressChart.dispose()
    progressChart = null
  }
})
</script>